<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body, svg {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        background: #051B33;
    }

    #whiteList {

    }

    .path {
        stroke-dasharray: 4;
        stroke-dashoffset: 200;
        -webkit-animation: dash 5s linear infinite;
        animation: dash 5s linear infinite;
    }

    @-webkit-keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="1000">
    // 图形引用
    <defs>
        // 用户图标
        <image id="user" xlink:href="../source/user.svg"/>
        //正六边形logo
        <image id="hexagon" xlink:href="../source/penta-s.svg"/>
        // 向右箭头
        <image id="arrow-r" xlink:href="../source/arrow-r.svg"/>
        // 向下箭头
        <image id="arrow-d" xlink:href="../source/arrow-d.svg"/>
        // 扁六边形logo
        <image id="box" xlink:href="../source/box.svg"/>
        // AD域图
        <image id="adShape" xlink:href="../source/adShape.svg"/>
        // 左正六边形
        <g id="leftHexagon" transform="translate(269,120)">
            <path  d="M110 180 L150 180 L90 73 L162 73" fill="none" stroke="rgba(4,143,184,1)"
                  stroke-width="1"/>
            <use href="#hexagon" x="150" y="10"/>

            <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">白名单认证</text>
            <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
        </g>
        <g id="toRight">
            <image href="../source/arrow-r.svg" y="-5">
                <animateMotion begin="12s" dur="6s" repeatCount="indefinite" rotate="auto"
                               path="M0 -5 L35 -5 L-25 -107 L52 -107">
                </animateMotion>
            </image>
        </g>
        // 右正六边形
        <g id="rightHexagon">
            <use href="#hexagon" x="150" y="10"/>
            <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">白名单认证</text>
            <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
            <path class="path" d="M110 -35 L182 -35 L122 72 L162 72" fill="none" stroke="rgba(4,143,184,1)"
                  stroke-width="1"/>
        </g>
        // ad域
        <g id="adArea">
            <use href="#adShape" x="20" y="20"/>
            <use href="#arrow-d" x="63" y="105"/>
            <text x="35" y="140" font-size="12" style="font-family: PingFangSC-Regular" fill='rgba(47,195,162,1)'>
                点击进入AD域
            </text>
        </g>
    </defs>
    // 用户图标
    <use href="#user" x="50" y="250"/>
    // 用户到终端合规线条
    <path fill="none" id="userToEnd" d="M137 300 L260 300" stroke="rgba(4,143,184,1)" stroke-width="1"/>
    // 终端合规六边形
    <use href="#hexagon" x="248" y="237"/>
    // 线条流动效果
    <g transform="translate(290,350)">
        <path class="path" d="M0 0 L0 330 L60 330 L60 0" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
        <use href="#arrow-r" x="-5" y="0">
            // 箭头移动效果
            <animateMotion path="M5 0 L5 330 L55 330 L55 0" begin="6s" dur="6s" repeatCount="indefinite" rotate="auto">
            </animateMotion>
        </use>
    </g>
    // 终端合规文字
    <text x="293" y="300" style="fill:rgba(216,216,216,1)" font-size="12">终端合规</text>
    // 终端合规文字下方长方形
    <rect x="305" y="305" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
    // 用户到终端合规箭头
    <use href="#arrow-r" x="0" y="-8">
        // 箭头移动效果
        <animateMotion id="userArrow" dur="6s" repeatCount="indefinite">
            <mpath xlink:href="#userToEnd"/>
        </animateMotion>
    </use>
    // 认证策略定义长方形和文字
    <rect xlink:href="" fill="rgba(47,195,162,0.4)" height="28" rx="2" ry="2"
          stroke-width="2" width="100" x="155" y="325"></rect>
    <text style="fill:rgba(47,195,162,1)" x="165" y="345" font-size="13">
        <tspan (click)="showRange()">认证策略定义</tspan>
    </text>
    // 操作系统检测
    <use href="#box" x="210" y="375"/>
    <text x="230" y="395" style="fill:rgba(216,216,216,1)" font-size="13">操作系统检测</text>
    // 自动修复补丁漏洞
    <use href="#box" x="300" y="425"/>
    <text x="312" y="445" style="fill:rgba(216,216,216,1)" font-size="13">自动修复补丁漏洞</text>
    // 自动杀毒软件
    <use href="#box" x="210" y="475"/>
    <text x="230" y="495" style="fill:rgba(216,216,216,1)" font-size="13">自动杀毒软件</text>
    // 自动安全应用软件
    <use href="#box" x="300" y="525"/>
    <text x="312" y="545" style="fill:rgba(216,216,216,1)" font-size="13">自动安全应用软件</text>
    // 开启防火墙
    <use href="#box" x="210" y="575"/>
    <text x="230" y="595" style="fill:rgba(216,216,216,1)" font-size="13">开启防火墙</text>
    // 禁用外设(U盘)
    <use href="#box" x="300" y="625"/>
    <text x="312" y="645" style="fill:rgba(216,216,216,1)" font-size="13">禁用外设(U盘)</text>

    // 白名单认证
    <use href="#leftHexagon"/>
    // 箭头从左向右移动
    <use href="#toRight" transform="translate(379,300)"/>
    //身份认证
    <g id="rightHexagon" transform="translate(441,228)">
        <use href="#hexagon" x="150" y="10"/>
        <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">AAA身份认证</text>
        <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
    </g>
    // 线条流动效果
    <g transform="translate(551,193)">
        <path d="M0 0 L72 0 L12 107 L52 107" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
        <use href="#arrow-r" x="-5" y="0">
            // 箭头移动效果
            <animateMotion path="M0 0 L72 0 L12 107 L52 107" begin="18s" dur="6s" repeatCount="indefinite" rotate="auto">
            </animateMotion>
        </use>
    </g>
    // 身份认证下面的线条流动
    <line class="path" x1="665" y1="353" x2="665" y2="410" stroke-width="1" stroke="rgba(4,143,184,1)"></line>
    // ad域
    <use href="#adArea"  transform="translate(590,390)"/>
    // 黑名单认证
    <g transform="translate(615,122)">
        <path d="M110 180 L150 180 L90 73 L162 73" fill="none" stroke="rgba(4,143,184,1)"
              stroke-width="1"/>
        <use href="#hexagon" x="150" y="10"/>
        <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">黑名单认证</text>
        <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
    </g>
    // 线条流动效果
    <g transform="translate(725,302)">
        <use href="#arrow-r" x="-5" y="0">
            // 箭头移动效果
            <animateMotion path="M0 0 L40 0 L-20 -107 L52 -107" begin="24s" dur="6s" repeatCount="indefinite" rotate="auto">
            </animateMotion>
        </use>
    </g>
    //接入方式认证
    <g transform="translate(790,230)">
        <use href="#hexagon" x="150" y="10"/>
        <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">接入方式认证</text>
        <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
    </g>
    // 线条流动效果
    <g transform="translate(900,195)">
        <path  d="M0 0 L72 0 L12 107 L52 107" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
        <use href="#arrow-r" x="-5" y="0">
            // 箭头移动效果
            <animateMotion path="M0 0 L72 0 L12 107 L52 107" begin="30s" dur="6s" repeatCount="indefinite" rotate="auto">
            </animateMotion>
        </use>
    </g>
    // 向下线条流动效果
    <g transform="translate(980,350)">
        <path class="path" d="M0 0 L0 210 L60 210 L60 0" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
        <use href="#arrow-r" x="-5" y="0">
            // 箭头移动效果
            <animateMotion path="M5 0 L5 210 L55 210 L55 0" begin="36s" dur="6s" repeatCount="indefinite" rotate="auto">
            </animateMotion>
        </use>
    </g>
    // 接入方式校验功能组
    <g transform="translate(900,370)">
        // 有线接入方式
        <use href="#box" x="10" y="10"/>
        <text x="30" y="30" style="fill:rgba(216,216,216,1)" font-size="13">有线接入方式</text>
        // 无线接入方式
        <use href="#box" x="80" y="60"/>
        <text x="95" y="80" style="fill:rgba(216,216,216,1)" font-size="13">无线接入方式</text>
        // VPN接入
        <use href="#box" x="10" y="120"/>
        <text x="30" y="140" style="fill:rgba(216,216,216,1)" font-size="13">VPN接入</text>
    </g>
    // 上网行为限制
    <g transform="translate(1075,300)">
        <path d="M0 0 L40 0 L-30 -110 L50 -110" fill="none" stroke="rgba(4,143,184,1)"
              stroke-width="1"/>
        <image href="../source/arrow-r.svg" y="-5">
            <animateMotion begin="42s" dur="6s" repeatCount="indefinite" rotate="auto"
                           path="M0 -5 L35 -5 L-25 -107 L52 -107">
            </animateMotion>
        </image>
        <g id="leftHexagon" transform="translate(-108,-185)">
            <use href="#hexagon" x="150" y="10"/>
            <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">上网行为限制</text>
            <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
        </g>
    </g>
    // 上网行为限制功能组
    <g transform="translate(1160,245)">
        // 向下线条流动效果
        <g >
            <path class="path" d="M0 0 L0 300 L60 300 L60 0" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
            <use href="#arrow-r" x="-5" y="0">
                // 箭头移动效果
                <animateMotion path="M5 0 L5 300 L55 300 L55 0" begin="48s" dur="6s" repeatCount="indefinite" rotate="auto">
                </animateMotion>
            </use>
        </g>
        // 接入方式校验功能组
        <g transform="translate(-80,10)">
            // 接入区域
            <use href="#box" x="10" y="10"/>
            <text x="30" y="30" style="fill:rgba(216,216,216,1)" font-size="13">接入区域</text>
            // 接入时段
            <use href="#box" x="80" y="60"/>
            <text x="95" y="80" style="fill:rgba(216,216,216,1)" font-size="13">接入时段</text>
            // 多线路
            <use href="#box" x="10" y="110"/>
            <text x="30" y="130" style="fill:rgba(216,216,216,1)" font-size="13">多线路</text>
            // 放代理
            <use href="#box" x="80" y="160"/>
            <text x="95" y="180" style="fill:rgba(216,216,216,1)" font-size="13">放代理</text>
            // 禁止Modern拨号
            <use href="#box" x="10" y="210"/>
            <text x="30" y="230" style="fill:rgba(216,216,216,1)" font-size="13">禁止Modern拨号</text>
        </g>
    </g>
    //授权
    <g transform="translate(1250,186)">
        //授权
        <g transform="translate(-105,35)">
            <use href="#hexagon" x="150" y="10"/>
            <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">授权</text>
            <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
        </g>
        // 线条流动效果
        <g>
            <path d="M0 0 L72 0 L12 107 L52 107" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
            <use href="#arrow-r" x="-5" y="0">
                // 箭头移动效果
                <animateMotion path="M0 0 L72 0 L12 107 L52 107" begin="54s" dur="6s" repeatCount="indefinite" rotate="auto">
                </animateMotion>
            </use>
        </g>
    </g>
    // 授权功能组
    <g transform="translate(1338,345)">
        // 向下线条流动效果
        <g >
            <path class="path" d="M0 0 L0 330 L60 330 L60 0" stroke="rgba(4,143,184,1)" stroke-width="1" fill="none"/>
            <use href="#arrow-r" x="-5" y="0">
                // 箭头移动效果
                <animateMotion path="M5 0 L5 330 L55 330 L55 0" begin="60s" dur="6s" repeatCount="indefinite" rotate="auto">
                </animateMotion>
            </use>
        </g>
        // 接入方式校验功能组
        <g transform="translate(-80,10)">
            // 接入区域
            <use href="#box" x="10" y="10"/>
            <text x="30" y="30" style="fill:rgba(216,216,216,1)" font-size="13">在线时长</text>
            // 接入时段
            <use href="#box" x="80" y="60"/>
            <text x="95" y="80" style="fill:rgba(216,216,216,1)" font-size="13">OS策略</text>
            // 多线路
            <use href="#box" x="10" y="110"/>
            <text x="30" y="130" style="fill:rgba(216,216,216,1)" font-size="13">出口策略控制</text>
            // 放代理
            <use href="#box" x="80" y="160"/>
            <text x="95" y="180" style="fill:rgba(216,216,216,1)" font-size="13">ACL</text>
            // 禁止Modern拨号
            <use href="#box" x="10" y="210"/>
            <text x="30" y="230" style="fill:rgba(216,216,216,1)" font-size="13">IP地址授权</text>
            // 禁止Modern拨号
            <use href="#box" x="80" y="260"/>
            <text x="95" y="280" style="fill:rgba(216,216,216,1)" font-size="13">RADIUS属性授权</text>
        </g>
    </g>
    // 上线消息
    <g transform="translate(1423,295)">
        <path d="M0 0 L40 0 L-30 -110 L50 -110" fill="none" stroke="rgba(4,143,184,1)"
              stroke-width="1"/>
        <image href="../source/arrow-r.svg" y="-5">
            <animateMotion begin="66s" dur="6s" repeatCount="indefinite" rotate="auto"
                           path="M0 -5 L35 -5 L-25 -107 L52 -107">
            </animateMotion>
        </image>
        <g id="leftHexagon" transform="translate(-108,-185)">
            <use href="#hexagon" x="150" y="10"/>
            <text x="190" y="72" style="fill:rgba(216,216,216,1)" font-size="12">上线消息</text>
            <rect x="210" y="75" width="20" height="4" stroke-width="2" fill="rgba(5,177,83,1)"></rect>
        </g>
    </g>

</svg>
</body>
</html>
